<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,
			ul,
			li {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.list-body li:nth-child(even) {
				background: yellow;
			}
			.list-body li:nth-child(odd) {
				background: #fff;
			}
			.list-body li:hover {
				background: green;
			}
			.list-body li.checkedColor {
				background: green;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/baidu.css" />
		<script src="../src/vue.js"></script>

		<script>
            let data = [
                {
                    id:Date.now()+Math.random(),
                    name: '邓紫棋',
                    song: '泡沫',
                    checked: false,
                    album: 10
                },
                {
                    id:Date.now()+Math.random(),
                    name: '王杰',
                    song: '泡沫',
                    checked: false,
                    album: 10
                },
                {
                    id:Date.now()+Math.random(),
                    name: '邓紫棋',
                    song: '泡沫',
                    checked: false,
                    album: 10
                }
            ]

		</script>
	</head>

	<body>
		<div class="wrap" id="app">
			<div class="baidu">
				<ul class="list list-head">
					<li>
						<div>
							<input type="checkbox" v-model="isCheckedAll"
								   @click="checkedHandle"
							/>全选
						</div>
						<span>歌单</span>
						<span>歌手</span>
						<span>专辑</span>
					</li>
				</ul>
				<ul class="list list-body">
					<li
							:class="{checkedColor: item.checked}"
							v-for="item,i in songList"
					>
						<div>
							<input type="checkbox" v-model="item.checked"

						></div>
						<span>{{item.song}}</span>
						<span>{{item.name}}</span>
						<span>{{item.album}}</span>
					</li>

				</ul>
				<div class="select">
					<span class="selectAll">

						<span>统计：</span>
					</span>
					<div class="others">
						<span><em></em>歌手有：{{selectedSongersLen}}位</span>
						<span><em></em>专辑有:{{albumCount}}张</span>
					</div>
				</div>
			</div>
		</div>

	<script>
		new Vue({
			el: '#app',
			data:{
				songList:data,
				checkedAll:false
			},
			methods:{


                checkedHandle(){
                    if(this.isCheckedAll){
                        this.checkedAll = false
					}else{
                        this.checkedAll = true
					}

					if (this.checkedAll){
                        //全选
						this.songList.map(item=>item.checked=true);
					}else{


                        
                        this.songList.map(item=>item.checked=false);

                    }

				}

			},
            computed:{
                // 定义了计算属性,但是没有调用该属性,该函数不会执行
                /**
				 *  只给计算属性一个函数,默认这个函数是在取值的时候触发的,
				 *  	设置值
				 *  		set(){}
				 *  	取值
				 *  		get(){}
                 * @returns {boolean}
                 */

                isCheckedAll:{
                    get(){
                        console.log("取值")
                        // every ,当数组中每一项都满足某个条件,返回true,只要有一项不满足就返回false
                        return this.songList.every(item=>item.checked);
					},
					set(){
                        console.log("设置值")
					}

				},

				selectedSongersLen(){
			        return this.songList.filter(item=>item.checked).length;
				},
                albumCount(){
			        return this.songList.filter(item=>item.checked).length==0?0:this.songList.filter(item=>item.checked).map(item=>item.album).reduce((x,y)=>{return x+y});
				}

			}
		})

	</script>

	</body>

</html>
